<template>
  <div class="all">
      <div class="banner">
          <swiper :options="swiperOption2" :not-next-tick="notNextTick" ref="mySwiper" class="swiper-container swiper-container-banner">
            <swiper-slide v-for="(item,index) in banner" class="swiper-slide">
              <img :src="item.img" alt="" class='slide-img'>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
      </div>
      <div class="material clearfix">
          <div class="price-now">
              <img :src="img_url+'/home/home/price-img.png'" alt="">
              <swiper :options="swiperOption1" :not-next-tick="notNextTick" ref="mySwiper"class="swiper-container swiper-container-price">
                <swiper-slide v-for="(item,index) in ycl_goods" class="price-text swiper-slide">
                  <p class="the-price"><em>{{item.gold_price}}</em><span>元/克</span></p>
                  <p>K金网今日黄金报价</p>
                </swiper-slide>
              </swiper>
          </div>
          <h3>原材料(板料)</h3>
          <router-link to="/mine" class="gold">
                <img :src="img_url+'/home/home/hj.png'" alt="" class="main-img">
                <p class="gold-name">黄金原材料(板料)</p>
                <p class="gold-yl">每100g原料加工售出后盈利</p>
                <p class="gold-price">¥532-665</p>
                <div class="gold-bottom">
                    <p>立即成为黄金批发商</p>
                    <img :src="img_url+'/home/home/icon.png'" alt="">
                </div>
          </router-link>

          <a href="{:U('Mobile/Goods/ycl_detail')}?id=20" class="platinum">
              <p class="gold-name">铂金原材料（板料）</p>
              <p class="gold-yl">每100g原料加工售出后盈利</p>
              <p class="gold-price">¥1044-1392</p>
              <div class="gold-bottom">
                  <p>立即成为铂金批发商</p>
                  <img :src="img_url+'/home/home/icon.png'" alt="">
              </div>
          </a>
          <a href="{:U('Mobile/Goods/ycl_detail')}?id=19" class="silver">
              <p class="gold-name">白银原材料（板料）</p>
              <p class="gold-yl">每1000g原料加工售出后盈利</p>
              <p class="gold-price">¥10-20</p>
              <div class="gold-bottom">
                  <p>立即成为白银批发商</p>
                  <img :src="img_url+'/home/home/icon.png'" alt="">
              </div>
          </a>
      </div>
      <div class="ycl">
          <div class="ycl-item">
              <img :src="img_url+'/home/ycl3.png'" alt="" class="ycl-bg">
              <div class="item-ycl">
                  <div class="ycl-item-left">
                      <img :src="img_url+'/home/zuanshi.png'" alt="" class="small">
                  </div>
                  <div class="ycl-item-middle">
                      <p class="name">钻石饰品原材料</p>
                      <p class="sy">原料加工售出后盈利</p>
                      <p class="yq">¥---</p>
                  </div>
                  <div class="ycl-item-right">
                      <a class="intro" href="javascript:void(0)">
                          <img :src="img_url+'/home/intro5.png'" alt="">
                      </a>
                  </div>
              </div>
          </div>
      </div>
      <div class="buy">
          <div class="buy-top clearfix">
              <h5>精选商品</h5>
              <span>好的黄金没有那么贵</span>
              <a href="{:U('Goods/goods_list')}" class="buy-more">更多 ></a>
          </div>
          <div class="buy-to-bottom">
              <div class="sp-tj clearfix">
                  <div class="sp-tj-left">
                      <span>{{cp_goods[0].goods_name}}</span>
                      <p>￥{{cp_goods[0].shop_price}}</p>
                      <a href="{:U('Mobile/Goods/detail')}?id=cp_goods[0].goods_id">立即购买</a>
                  </div>
                  <div class="sp-tj-right">
                      <img :src="'https://m.kjinwang.com'+cp_goods[0].original_img" alt="">
                  </div>
              </div>
              <dl>
                  <dd>
                      <a class="ori" href="{:U('Mobile/Goods/detail')}?id=item.id">
                          <img :src="'https://m.kjinwang.com'+cp_goods[1].original_img" alt="">
                      </a>
                  </dd>
                  <dt>
                      <span>{{cp_goods[1].goods_name}}</span>
                      <p>￥{{cp_goods[1].shop_price}}</p>
                      <a href="{:U('Mobile/Goods/detail')}?id=cp_goods[1].goods_id">立即购买</a>
                  </dt>
              </dl>
              <dl>
                  <dd>
                      <a class="ori" href="{:U('Mobile/Goods/detail')}?id=item.id">
                          <img :src="'https://m.kjinwang.com'+cp_goods[2].original_img" alt="">
                      </a>
                  </dd>
                  <dt>
                      <span>{{cp_goods[2].goods_name}}</span>
                      <p>￥{{cp_goods[2].shop_price}}</p>
                      <a href="{:U('Mobile/Goods/detail')}?id=cp_goods[2].goods_id">立即购买</a>
                  </dt>
              </dl>
          </div>

      </div>
      <div class="introduce">
          <div class="intro-top clearfix">
              <h5>k金网</h5>
              <span>了解k金网</span>
          </div>
          <video id="video" :src="base_url+'/public/upload/video.mp4'" :poster="img_url+'/home/video_poster.png'"  height="414" width="720" :autoplay="playStatus" v-on:click="playClick()">
            your browser does not support the video tag
        </video>
      </div>
      <div class="processing">
          <div class="intro-top clearfix">
              <h5>设计加工</h5>
              <span>顶级厂商精心加工</span>
          </div>
          <a href="{:U('Mobile/index/processing')}">
              <img :src="img_url+'/home/jg.png'" alt="加工">
              <div class="text">
                  <p>汇集国际知名设计师</p>
                  <p>整合精湛加工团队</p>
              </div>
          </a>
      </div>
      <div class="processing">
          <div class="intro-top clearfix">
              <h5>销售批发</h5>
              <span>让您的产品快速流转市场</span>
          </div>
          <a href="{:U('Mobile/index/sales')}">
              <img :src="img_url+'/home/xs.png'" alt="">
              <div class="text">
                  <p>销售网络覆盖</p>
                  <p>20多个知名品牌</p>
              </div>
          </a>
      </div>
      <div class="ours">
          <div class="tel clearfix">
              <div class="telphone clearfix">
                  <img :src="img_url+'/home/tel.png'" alt="">
                  <em>{{phone}}</em>
              </div>
          </div>
          <p>网站备案许可证号:豫ICP备16000488</p>
          <p>经营许可证:豫B2-20180290</p>
          <span>copyright©河南一带一路科技有限公司</span>
      </div>
  </div>
  </div>
</template>

<script type="text/javascript">
import global from '../global.vue'
import axios from 'axios'
import $ from 'jquery'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import Vue from "vue";
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
   data(){
     return{
       name: '',
       img_url:global.img_url,
       base_url:global.base_url,
       phone:global.phone,
       footer:global.footer,
       // href_url:global.href_url,
       banner:[],
       ycl_goods:[],
       cp_goods:[],
       playStatus:false,
       isPlay:false,
       swiperOption1: {
         notNextTick: true,
          direction: 'vertical',
          pagination: '.swiper-pagination',
          paginationClickable: true,
          loop: true,
          speed: 1000,
          autoplay: 2000,

        },
        swiperOption2: {
          notNextTick: true,
           direction: 'horizontal',
           paginationClickable: true,
           loop: true,
           speed: 1000,
           autoplay: 2000,

         }
     }
   },
    mounted:function(){
      var that = this;
        $.ajax({
          url: 'https://m.kjinwang.com/api/Index/index',
          type: 'GET',
          dataType: 'JSON',
          data:{type:2},
          success: function (res) {
            that.banner = res.banner;
            that.ycl_goods = res.ycl_goods;
            that.cp_goods = res.cp_goods;
          },
          fail:function(err){
            // console.log(err)
          }
        });
    },


    methods:{
      playClick(){
        this._dom = document.getElementById('video');
        this.isPlay = !this.isPlay;
        if(this.isPlay==true){
          this._dom.play();
        }else{
          this._dom.pause();
        }
    },
    },
    components:{
      swiper,
      swiperSlide,
    }
  }
</script>

<style src='../assets/css/index.css'>
</style>
